<template>
    <div id="UserManager">
      <el-card class="box-card-main">
        <el-card class="box-card" shadow="nerve">
          <el-row>
            <el-col :span="4">
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="openAddAndUpdateUserWindow('insert')">添加diy商品</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerve" style="margin-top: 20px;height: 600px;overflow-y: scroll;">
          <el-table :data="userData" border >
            <el-table-column fixed prop="id" label="id" width="150"></el-table-column>
            <el-table-column prop="diyImageId" label="diy商品图片" width="200">
            <template slot-scope="scope">
                       <el-image style="width: 100px; height: 100px"
                         :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.diyImageId"></el-image>
                     </template>
                     </el-table-column>
              <el-table-column prop="diyDetailsImageId" label="diy商品详情图片" width="250">
                <template slot-scope="scope">
                    <el-carousel height="150px">
                     <el-carousel-item v-for="item in scope.row.diyDetailsImageId.split(',')" :key="item">
                      <img height="150" width="150" :src="'http://101.43.223.224:8765/image/getImageById?id='+item">
                  <!-- <template slot-scope="scope">
                       <el-image style="width: 100px; height: 100px"
                         :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.diyDetailsImageId"></el-image>
                     </template> -->
                    </el-carousel-item>
                    </el-carousel>
                </template>
                     </el-table-column>
            <el-table-column prop="diyName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="diyPrice" label="商品原价" width="200"></el-table-column>
            <el-table-column prop="diyFavorablePrice" label="商品现价" width="200"></el-table-column>
            <el-table-column prop="diyVipPrice" label="vip价钱" width="200"></el-table-column>
            <el-table-column prop="diyGrade" label="商品评分" width="200"></el-table-column>
            <el-table-column prop="diyDetails" label="商品详情" width="200"></el-table-column>
            <el-table-column prop="typeB" label="分类" width="200"></el-table-column>
            <el-table-column prop="recommendedScenarios" label="推荐场景" width="200"></el-table-column>
            <el-table-column prop="recommendedPeopleNumber" label="推荐人数" width="200"></el-table-column>
            <el-table-column prop="detailsOfPurchaseInstructions" label="购买须知" width="200"></el-table-column>
            <el-table-column prop="salesVolume" label="销量" width="200"></el-table-column>
            <el-table-column prop="isOffer" label="特价" width="150">
                       <template slot-scope="scope">
                         <p>{{scope.row.isOffer===0?"原价":scope.row.isOffer===1?"特价":"888"}}</p>
                       </template>
            </el-table-column>
            <el-table-column prop="isOffer" label="特色" width="150">
                       <template slot-scope="scope">
                         <p>{{scope.row.isOffer===0?"非特色":scope.row.isOffer===1?"特色":"888"}}</p>
                       </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="340" align="center">
              <template slot-scope="scope">
                <el-button @click="openupCommodityInfoWindow(scope.row)" type="success" size="medium">编辑</el-button>
                <el-button @click="deletdiybyid(scope.row.id)" type="danger" size="medium">上架</el-button>
                <el-button @click="deletvanishdiy(scope.row.id)" type="danger" size="medium">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          style="margin: 30px 0 10px">
        </el-pagination>
        <el-dialog :title="windowTypeInfo" :visible.sync="controlAddAndUpdateUserWindow" width="45%" center>
          <el-form :model="diylistForm" ref="userFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="diy商品图片" style="margin-bottom: 0;">
                <el-upload
                  class="avatar-uploader"
                  action="action"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="轮播图">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
               <el-form-item label="商品主图">
                  <el-upload
                  action="action"
                  list-type="picture-card"
                  class="upload-demo"
                  :file-list="fileList1"
                  :on-remove="afileremove"
                  :before-upload="auploadbefore">
                  <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="fileList1" alt="">
                  </el-dialog>
                  </el-form-item>
            <el-form-item label="id" prop="id" v-show="false">
              <el-input v-model="diylistForm.id"></el-input>
            </el-form-item>
            <el-form-item label="是否特价" prop="isOffer">
                <el-select v-model="diylistForm.isOffer" placeholder="请选择" style="width: 100%;">
                  <el-option label="原价" :value="'0'"></el-option>
                  <el-option label="特价" :value="'1'"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否特色" prop="isCharacteristic">
                <el-select v-model="diylistForm.isCharacteristic" placeholder="请选择" style="width: 100%;">
                  <el-option label="非特色" :value="'0'"></el-option>
                  <el-option label="特色" :value="'1'"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分类" prop="diyClassificationId">
                <el-select v-model="diylistForm.diyClassificationId" placeholder="请选择" style="width: 100%;">
                  <el-option
                  v-for="item in commdiytypeDate"
                  :key="item.typeSname"
                  :label="item.typeSname"
                  :value="item.id">
                </el-option>
                </el-select>
              </el-form-item>
            <el-form-item label="diy商品名称" prop="diyName">
              <el-input v-model="diylistForm.diyName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="diy商品原价" prop="diyPrice">
              <el-input v-model="diylistForm.diyPrice" placeholder="请输入商品原价"></el-input>
            </el-form-item>
            <el-form-item label="diy商品现价" prop="diyFavorablePrice">
              <el-input v-model="diylistForm.diyFavorablePrice" placeholder="请输入商品现价"></el-input>
            </el-form-item>
            <el-form-item label="vip价" prop="diyVipPrice">
              <el-input v-model="diylistForm.diyVipPrice" placeholder="请输入vip价格"></el-input>
            </el-form-item>
            <el-form-item label="商品评分" prop="diyGrade">
              <el-input v-model="diylistForm.diyGrade" placeholder="请输入评分"></el-input>
            </el-form-item>
            <el-form-item label="diy商品详情" prop="diyDetails">
              <el-input v-model="diylistForm.diyDetails" placeholder="请输入商品详情"></el-input>
            </el-form-item>
  
            <el-form-item label="推荐场景" prop="recommendedScenarios">
              <el-input v-model="diylistForm.recommendedScenarios" placeholder="请输入场景"></el-input>
            </el-form-item>
            <el-form-item label="推荐人数" prop="recommendedPeopleNumber">
              <el-input v-model="diylistForm.recommendedPeopleNumber" placeholder="请输入场景"></el-input>
            </el-form-item>
            <el-form-item label="购买须知详情" prop="detailsOfPurchaseInstructions">
              <el-input v-model="diylistForm.detailsOfPurchaseInstructions" placeholder="请输入购买须知"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="controlAddAndUpdateUserWindow = false">取 消</el-button>
            <el-button @click="resetForm('userFormRef')">重 置</el-button>
            <el-button type="primary" @click="slidesInfo('userFormRef')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog @close="updateclose" title="修改信息" :visible.sync="diylistdaty" width="45%" center>
          <el-form :model="diylistForm" ref="userFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="diy商品图片" style="margin-bottom: 0;">
                <el-upload
                  class="avatar-uploader"
                  action="action"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUploadb">
                  <img v-if="imageUrl2" :src="imageUrl2" class="avatar" alt="轮播图">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
               <el-form-item label="商品主图">
                  <el-upload
                  action="action"
                  list-type="picture-card"
                  class="upload-demo"
                  :file-list="fileList2"
                  :on-remove="bfileremove"
                  :before-upload="auploadbefore2">
                  <i class="el-icon-plus"></i>
                  </el-upload>
                 
                  </el-form-item>
            <el-form-item label="id" prop="id" v-show="false">
              <el-input v-model="diylistForm.id"></el-input>
            </el-form-item>
            <el-form-item label="是否特价" prop="isOffer">
                <el-select v-model="diylistForm.isOffer" placeholder="请选择" style="width: 100%;">
                  <el-option label="原价" :value="0"></el-option>
                  <el-option label="特价" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否特色" prop="isCharacteristic" >
                <el-select v-model="diylistForm.isCharacteristic" placeholder="请选择" style="width: 100%;">
                  <el-option label="非特色" :value="0"></el-option>
                  <el-option label="特色" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分类" prop="diyClassificationId">
                <el-select v-model="diylistForm.diyClassificationId" placeholder="请选择" style="width: 100%;">
                  <el-option
                  v-for="item in commdiytypeDate"
                  :key="item.typeSname"
                  :label="item.typeSname"
                  :value="item.id">
                </el-option>
                </el-select>
              </el-form-item>
            <el-form-item label="diy商品名称" prop="diyName">
              <el-input v-model="diylistForm.diyName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="diy商品原价" prop="diyPrice">
              <el-input v-model="diylistForm.diyPrice" placeholder="请输入商品原价"></el-input>
            </el-form-item>
            <el-form-item label="diy商品现价" prop="diyFavorablePrice">
              <el-input v-model="diylistForm.diyFavorablePrice" placeholder="请输入商品现价"></el-input>
            </el-form-item>
            <el-form-item label="vip价" prop="diyVipPrice">
              <el-input v-model="diylistForm.diyVipPrice" placeholder="请输入vip价格"></el-input>
            </el-form-item>
            <el-form-item label="商品评分" prop="diyGrade">
              <el-input v-model="diylistForm.diyGrade" placeholder="请输入评分"></el-input>
            </el-form-item>
            <el-form-item label="diy商品详情" prop="diyDetails">
              <el-input v-model="diylistForm.diyDetails" placeholder="请输入商品详情"></el-input>
            </el-form-item>
  
            <el-form-item label="推荐场景" prop="recommendedScenarios">
              <el-input v-model="diylistForm.recommendedScenarios" placeholder="请输入场景"></el-input>
            </el-form-item>
            <el-form-item label="推荐人数" prop="recommendedPeopleNumber">
              <el-input v-model="diylistForm.recommendedPeopleNumber" placeholder="请输入场景"></el-input>
            </el-form-item>
            <el-form-item label="购买须知详情" prop="detailsOfPurchaseInstructions">
              <el-input v-model="diylistForm.detailsOfPurchaseInstructions" placeholder="请输入购买须知"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="openUpdatewindows = false">取 消</el-button>
            <el-button @click="resetForm('userFormRef')">重 置</el-button>
            <el-button type="primary" @click="update('userFormRef')">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </template>
  <script>
  export default {
  name: 'UserManager',
  data () {
    return {
      imageFile:'',
      imageFile2:'',
      controlAddAndUpdateUserWindow: false, // 控制添加或修改窗口是否打开
      openUpdatewindows: false,
      diylistdaty: false,
      windowTypeInfo: '', // 窗口类型信息
      imageUrl: '', // 图片回显路径
      imageUrl2: '', // 图片回显路径
      imageuil: '', // 图片回显路径
      id:'',
      imageId: '',
      fileList1:[],
      fileList2:[],
      commdiytypeDate:[],
      userData: [], // 用户数据
      diylistForm: { // 表单
        id: 0, // 主键
        diyName: '', //diy商品名称 
        diyPrice:'', //diy商品原价
        diyFavorablePrice:'', //diy商品现价
        diyVipPrice:'', //vip价
        diyGrade:'', //diy商品评分
        diyClassificationId:'', //diy商品分类id
        typeB:'',
        recommendedScenarios:'', //推荐场景
        recommendedPeopleNumber:'', //推荐人数
        detailsOfPurchaseInstructions:'', //购买须知详情
        salesVolume:'', //销量
        isOffer:'', //1特价 0不是特价
        isCharacteristic:'', //1特色 0不是特色
      },
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示的个数
      total: 0, // 总条数
      delfilelist:[]
    }
  },
  mounted () {
    this.querysliderlist()
    this.diytype()
  },
  methods: {
    updateclose(){
      this.fileList2=[]
    },
  afileremove(file){
        for(var a in this.fileList1){
          if(this.fileList1[a].uid == file.uid){
            this.fileList1.splice(parseInt(a),parseInt(a)+1)
          }
        }
      },
  bfileremove(file){
      if(file.file == undefined){
        this.delfilelist.push(file.id)
      }
        for(var a in this.fileList1){
          if(this.fileList2[a].uid == file.uid){
            this.fileList2.splice(parseInt(a),parseInt(a)+1)
          }
        }
      },
  auploadbefore(file){
            console.log(file)
            this.fileList1.push({url:URL.createObjectURL(file),file:file})
            console.log(this.fileList1)
  
            return false
          }, 
          auploadbefore2(file){
            console.log(file)
            this.fileList2.push({url:URL.createObjectURL(file),file:file})
            console.log(this.fileList2)
  
            return false
          },
    // 进入回收站diy商品
    deletvanishdiy (data) {
      this.$confirm('此操作商品将进入回收站你确定吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('handwork/recycleDel', {
          params: {
            id: data
          }
        }).then((result) => {
          if (result.data.flag) {
            this.querysliderlist()
            this.myMessage('success', result.data.data)
            this.$message({
             type: 'info',
            message: '成功进入回收站'
        })
          } else {
            this.myMessage('warning', result.data.data)
  
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },

    // 上架diy商品
    deletdiybyid (data) {
      this.$confirm('您要上架该商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('handwork/redemptionDiy', {
          params: {
            id: data
          }
        }).then((result) => {
          if (result.data.flag) {
            this.querysliderlist()
            this.myMessage('success', result.data.data)
            this.$message({
             type: 'info',
            message: '成功上架'
        })
          } else {
            this.myMessage('warning', result.data.data)
  
          }
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    },
    beforeAvatarUpload (file) {
      // 验证图片类型
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      // 验证图片大小
      const isLt2M = file.size / 1024 / 1024 < 5
      // 提示
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 ”图片“ 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      // 赋值
      this.imageFile = file
      console.log(this.imageFile)
      // 图片回显
      this.imageUrl = URL.createObjectURL(file)
      return false
    },
    beforeAvatarUploadb (file) {
      // 验证图片类型
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      // 验证图片大小
      const isLt2M = file.size / 1024 / 1024 < 5
      // 提示
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 ”图片“ 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      // 赋值
      this.imageFile2 = file
      console.log(this.imageFile2)
      // 图片回显
      this.imageUrl2 = URL.createObjectURL(file)
      return false
    },
    //查询分类信息
    diytype() {
      this.$axios.get('Commodity/getTypeName', {
     
      }).then((result) => {
        if (result.data) {
          this.commdiytypeDate = result.data.data
        }
      }).catch((err) => {
        console.log(err)
      })
        },
    // 查询全部diy信息
    querysliderlist () {
      this.$axios.get('handwork/regretDiy', {
        params: {
              pageNum: this.pageNum,
              pageSize: this.pageSize
            }
      }).then((result) => {
        if (result.data.flag) {
          this.userData = result.data.data.content
          this.total = result.data.data.totalSize
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    //多图片修改
    update(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const formData = new FormData()
      console.log(this.imageFile2)
      if (this.imageFile2) {
        formData.set('diyImageId1', this.imageFile2, this.imageFile2.name)
      } 
      if (this.fileList2.length>0) {
        this.delfilelist.forEach(a =>{
          var c = []
  
          this.diylistForm.diyDetailsImageId.forEach(b =>{
            if(a!=b){
              c.push(b)
            }
          })
          this.diylistForm.diyDetailsImageId=c
        })
        console.log(this.fileList2)
        for(var a in this.fileList2){
          if(this.fileList2[a].file){
  
            formData.append('diyDetailsImageId1', this.fileList2[a].file, this.fileList2[a].file.name)
          }
        }
      }
      for (const albumInfoKey in this.diylistForm) {
        if(this.diylistForm[albumInfoKey]){
          formData.set(albumInfoKey, this.diylistForm[albumInfoKey])
        }
          
      }
            this.$axios.post('handwork/HandworkDiyUpdate',
              formData
            ).then(res => {
              if (res.status === 200) {
                this.myMessage('success', '恭喜你，修改成功！')
                this.diylistdaty = false // 关闭窗口
                this.fileList2=[]
                // this.jsfileList2=[]
                this.formData = {
                  id: '',
                  commodityName: '',
                  back:'',
                  price: '',
                  favorablePrice: '',
                  vipPrice: '',
                  typeId: '',
                  goodsQuantity:''
                }
                this.imageFile = null
                this.querysliderlist()// 全查刷新
              }
            }).catch(err => {
              this.myMessage('warning', '对不起，保存失败，请完善未填信息或者稍后再试')
              console.log(err)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
    // 保存用户信息
    slidesInfo (formName) {
      const formData = new FormData()
      console.log(this.imageFile)
      if (this.imageFile) {
        formData.set('diyImageId1', this.imageFile, this.imageFile.name)
      } 
      console.log(this.fileList1)
      if (this.fileList1.length>0) {
        for(var a in this.fileList1){
  
          formData.append('diyDetailsImageId1', this.fileList1[a].file, this.fileList1[a].file.name)
        }
      }
      for (const albumInfoKey in this.diylistForm) {
        if(this.diylistForm[albumInfoKey]){
          formData.set(albumInfoKey, this.diylistForm[albumInfoKey])
        }
          
      }
      this.$axios.post('handwork/diyAdd', formData).then((result) => {
        if (result.data.flag) {
          this.controlAddAndUpdateUserWindow = false
          this.querysliderlist()
          this.resetForm(formName)
          this.imageFile = File
          this.imageUrl = ''
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleAvatarSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      openupCommodityInfoWindow (row) { 
             this.windowTypeInfo = '修改diy信息'
        this.imageUrl2 = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyImageId
        this.imageuil = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyDetailsImageId
        this.diylistForm = JSON.parse(JSON.stringify(row))
        this.diylistForm.diyDetailsImageId=this.diylistForm.diyDetailsImageId.split(',')
        this.diylistForm.diyDetailsImageId.forEach(a =>{
          this.fileList2.push({url:'http://101.43.223.224:8765/image/getImageById?id='+a,id:a})
        })
        this.diylistdaty=true
    
        
        // this.openupdate= row
      },
    // 打开添加或修改角色信息窗口
    openAddAndUpdateUserWindow (windowType, row) {
      this.controlAddAndUpdateUserWindow = true
      if (windowType === 'insert') {
        this.windowTypeInfo = '添加diy'
        this.imageUrl = null
        this. diylistForm= { // 表单
          id: 0, // 主键
        diyName: '', //diy商品名称 
        diyPrice:'', //diy商品原价
        diyFavorablePrice:'', //diy商品现价
        diyVipPrice:'', //vip价
        diyImageId:'', //diy商品图片
        diyDetailsImageId:'', //diy商品详情图片
        diyGrade:'', //diy商品评分
        diyClassificationId:'', //diy商品分类id
        recommendedScenarios:'', //推荐场景
        recommendedPeopleNumber:'', //推荐人数
        detailsOfPurchaseInstructions:'', //购买须知详情
        salesVolume:'', //销量
        isOffer:'', //1特价 0不是特价
        isCharacteristic:'', //1特色 0不是特色
      }
      } else {
        this.windowTypeInfo = '修改diy信息'
        this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyImageId
        this.imageuil = 'http://101.43.223.224:8765/image/getImageById?id=' + row.diyDetailsImageId
        this.diylistForm = JSON.parse(JSON.stringify(row))
      }
    },
    // 每页显示的个数
    handleSizeChange (val) {
      this.querysliderlist()
      this.pageSize = val
    },
    // 当前页数
    handleCurrentChange (val) {
      this.querysliderlist()
      this.pageNum = val
    },
    // 文本域最大显示数
    descInput () {
      const txtVal = this.diylistForm.back.length
      if (txtVal >= 250) {
        this.remnant = 0
      } else {
        this.remnant = 250 - txtVal
      }
    },
    myMessage (type, message) {
        this.$message({
          message: message,
          type: type
        })
      }
  }
  }
  </script>
  
  <style scoped>
    .box-card-main {
      height:820px;
    }
    .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  ::v-deep(.avatar-uploader .el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  